<template>
  <div class="radar-screen">
    <div class="radarScreen-chart" id="RadarScreen"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'radarScreen',
  mounted () {
    this.$nextTick(() =>{
      this.initCharts()
    })
  },
  methods:{
    initCharts(){
      const charts = echarts.init(document.getElementById('RadarScreen'))
      const option = {
        // 同一纬度的数据显示颜色
        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        radar: [
          {
            indicator: [
              { text: '北京' },
              { text: '杭州' },
              { text: '武汉' },
              { text: '上海' },
              { text: '广州' }
            ],
            center: ['50%', '50%'],  // 圆心坐标
            radius: 60,
            startAngle: 90,   // 坐标器起始角度
            splitNumber: 4,   // 分隔线数
            shape: 'circle',  // 雷达图类型
            axisName: {
              formatter: '【{value}】',
              color: '#428BD4'
            },
            // 雷达图的分隔区域样式
            splitArea: {
              // 分隔区域样式
              areaStyle: {
                // 分隔区域颜色
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 40,
                opacity: 0.4,  // 设置分隔区域颜色透明度
              }
            },
            // 坐标轴相关设置
            axisLine: {
              // 坐标轴颜色
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              // 分隔线样式
              lineStyle: {
                color: '#26C3BE',
                width: 1,
              }
            }
          },
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4
              }
            },
            data: [
              {
                value: [100, 8, 39, 27, 2000],
                name: 'Data A'
              },
              {
                value: [60, 5, 57, 69, 1500],
                name: 'Data B',
                areaStyle: {
                  color: 'rgba(255, 228, 52, 0.4)'
                }
              }
            ]
          },
        ]
      };
      charts.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.radarScreen-chart{
  height: 175px;
}
</style>
